/*
 * @Author: mayijun
 * @Date: 2022-05-13 10:21:47
 * @LastEditors: mayijun
 * @LastEditTime: 2022-07-14 10:16:04
 */
//场景取数页签
import { defineComponent, reactive, onMounted, ref, computed } from 'vue';
import './index.scss';
import API from '@/services';
import Table from '@/components/Table';
import GroupTree from '@/components/GroupTree';
import FetchDataDrawer from './fetchDataDrawer';
import { ElMessage, ElMessageBox } from 'element-plus';

const FetchDataSettings = defineComponent({
  name: 'FetchDataSettings',
  setup: (props, { slots, attrs, emit }) => {

    const {
      scene: {
        getSceneGroupRoot,
        deleteSceneGroupById,
        putSceneGroup,
        postSceneGroup,
        deleteSceneDeleteById
      }
    } = API;
    // 分组key
    const groupKey = ref(1);

    const state = reactive({
      fetchDataList: [] as any[],
      total: 0,
      drawerVisible: false,
      drawerType: "1",
      id: 0,
      groupId: "",
    });

    const searchForm = reactive({
      groupId: undefined,
      pageNum: 1,
      pageSize: 10,
      order: undefined,
      sortBy: undefined
    });

    const tableColumn = reactive([
      {
        label: 'ID',
        prop: 'id',
      },
      {
        label: '场景名称',
        prop: 'cnName',
      },
      {
        label: '创建人',
        prop: 'createBy',
      },
      {
        label: '创建时间',
        prop: 'createTime',
      },
      {
        label: '操作',
        width: 160,
        default: ({ row }: any) => {
          return (
            <>
              <el-button type="text" onClick={() => toInfo(row)}>查看</el-button>
              <el-button type="text" onClick={() => toEdit(row)}>编辑</el-button>
              <el-button type="text" onClick={() => toDelete(row)}>删除</el-button>
            </>
          );
        }
      }
    ]);

    const toAdd = () => {
      if (!state.groupId) {
        ElMessage.warning("请先选择场景分类,只能选择最后一级");
        return false;
      }
      state.drawerVisible = true;
      state.drawerType = "1";
    }

    const toInfo = (row: any) => {
      state.drawerVisible = true;
      state.drawerType = "3";
      state.id = row.id;
    }

    const toEdit = (row: any) => {
      state.drawerVisible = true;
      state.drawerType = "2";
      state.id = row.id;
    }

    const toDelete = (row: any) => {
      ElMessageBox.alert('', '是否确认删除该场景?', {
        cancelButtonText:"取消",
        confirmButtonText: '确认删除',
        showCancelButton: true,
        confirmButtonClass: 'message-box-del'
      })
        .then(async () => {
          try {
            const { code, msg } = await deleteSceneDeleteById({
              id: row.id
            });
            if (code === 200) {
              ElMessage.success('删除成功');
            } else {
              ElMessage.error(msg);
            }
            getFetchDataList();
          } catch (error) {
            console.log(error);
          }
        })
        .catch(() => {
          ElMessage.info('取消删除');
        });
    }

    //查询场景取数列表
    const getFetchDataList = async () => {
      try {
        const { code, data }: any = await API.scene.postSceneList(searchForm);
        if (code === 200 && Array.isArray(data?.list)) {
          state.fetchDataList = data.list;
          state.total = data.total;
        }
      } catch (error) {
        console.log(error);
      }
    };

    //关闭抽屉
    const closeDrawer = () => {
      state.drawerVisible = false;
      getFetchDataList();
      groupKey.value = groupKey.value + 1;
    }

    onMounted(() => {
      getFetchDataList();
    });

    return () => {
      return (
        <div class="fetch-data-settings">
          <div class="left-div">
            <GroupTree
              titles="场景分类管理"
              groupKey={groupKey.value}
              listFn={getSceneGroupRoot}
              delFn={deleteSceneGroupById}
              reNameFn={putSceneGroup}
              addFn={postSceneGroup}
              onGetTreeNode={(node: any) => {
                if (node.id === 'new') return;
                searchForm.groupId = node.id;
                searchForm.pageNum = 1;
                searchForm.pageSize = 10;
                state.groupId = "";
                getFetchDataList();
                if (node.last) {
                  state.groupId = node.id;
                }
              }}
            ></GroupTree>
          </div>
          <div class="right-div">
            <div class="tool-bar">
              <el-button type="primary" onClick={toAdd}>创建场景</el-button>
            </div>
            <Table
              data={state.fetchDataList}
              column={tableColumn}
              onPageCurrentChange={(page: number) => {
                searchForm.pageNum = page;
                getFetchDataList();
              }}
              onPageSizeChange={(size: number) => {
                searchForm.pageNum = 1;
                searchForm.pageSize = size;
                getFetchDataList();
              }}
              pagination={{
                total: state.total * 1,
                currentPage: searchForm.pageNum,
                pageSize: searchForm.pageSize
              }}
            />
          </div>
          <FetchDataDrawer
            key={Math.random()}
            drawerVisible={state.drawerVisible}
            drawerType={state.drawerType}
            groupId={searchForm.groupId}
            id={state.id}
            onClose={closeDrawer}
          ></FetchDataDrawer>
        </div>
      );
    };
  }
});

export default FetchDataSettings;
